import React, {useContext} from 'react';
import {View, StyleSheet, BackHandler} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {useMount, useSafeState} from 'ahooks';
import {Button, Text, BottomSheet, ListItem} from '@rneui/base';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {useSelector, useDispatch} from 'react-redux';
import {setAccountInfo, setToken} from '@/store';
import GlobalContext from '@/GlobalContext';
import RNExitApp from 'react-native-exit-app';

export default () => {
  const dispatch = useDispatch();
  const navigation = useNavigation();
  const [isVisible, setIsVisible] = useSafeState(false);

  return (
    <>
      <Button
        onPress={() => setIsVisible(true)}
        titleStyle={{
          color: '#333',
        }}
        buttonStyle={{
          backgroundColor: '#ffffff',
          marginTop: 10,
        }}>
        退出
      </Button>
      <BottomSheet
        onBackdropPress={() => {
          setIsVisible(false);
        }}
        isVisible={isVisible}>
        <ListItem
          containerStyle={{
            marginTop: 10,
            flexDirection: 'row',
            justifyContent: 'center',
          }}
          onPress={() => {
            AsyncStorage.removeItem('token');
            AsyncStorage.removeItem('tokenInfo');
            AsyncStorage.removeItem('accountInfo');
            dispatch(setAccountInfo({}));
            dispatch(setToken(''));
            navigation.navigate('Home');
          }}>
          <Text>退出登录</Text>
        </ListItem>
        <ListItem
          containerStyle={{
            marginTop: 1,
            flexDirection: 'row',
            justifyContent: 'center',
          }}
          onPress={() => {
            try {
              BackHandler.exitApp();
            } catch (e) {}

            try {
              RNExitApp.exitApp();
            } catch (e) {}
          }}>
          <Text>关闭app</Text>
        </ListItem>
        <ListItem
          containerStyle={{
            marginTop: 10,
            flexDirection: 'row',
            justifyContent: 'center',
          }}
          onPress={() => {
            setIsVisible(false);
          }}>
          <Text>取消</Text>
        </ListItem>
      </BottomSheet>
    </>
  );
};
